import './index.css'

import { Button, Col, Form, Input, Row, Space, message } from 'antd'

import $axios from '@/sever'
import React from 'react'
import { useNavigate } from 'react-router-dom'

const layout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 16
  }
}
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16
  }
}

const ResetPwd: React.FC = () => {
  const navigate = useNavigate()
  const [form] = Form.useForm()
  const [messageApi, contextHolder] = message.useMessage() //全局提示
  // 重置密码
  const onFinish = async () => {
    const { code, msg } = await $axios.post('/users/updatePwd', {
      password: form.getFieldValue('password'),
      secret: sessionStorage.getItem('secret') || '',
      emailcode: form.getFieldValue('emailcode')
    })
    console.log(code, msg)

    if (code === 200) {
      messageApi.open({
        type: 'success',
        content: msg
      })
      setTimeout(() => {
        navigate('/login')
      }, 500)
    } else {
      messageApi.open({
        type: 'error',
        content: msg
      })
    }
  }
  // 确认密码
  const validatePwd = (_, value) => {
    if (!value || value === form.getFieldValue('password')) {
      return Promise.resolve()
    }
    return Promise.reject(new Error('两次密码输入不一致!'))
  }
  // 检查密码
  const checkPwd = (_: any, value: string) => {
    if (value.length < 8 || value.length > 16) {
      return Promise.reject('密码长度8-16位')
    }
    const reg =
      /^(?=(?:.*[a-zA-Z]){1})(?=(?:.*[0-9]){1}|(?:.*[!@#$%^&*()_+\\\-={}[\]:;"'<>,.?\\/]){1}|(?:.*[!@#$%^&*()_+\\\-={}[\]:;"'<>,.?\\/]){1})(?:[a-zA-Z0-9!@#$%^&*()_+\\\-={}[\]:;"'<>,.?\\/]){8,16}$/

    if (!reg.test(value)) {
      return Promise.reject('密码必须包含数字、字母、特殊符号')
    }
    return Promise.resolve()
  }
  return (
    <div className="resetpwd">
      {/* 全局提示 */}
      {contextHolder}
      <Row>
        <Col span={6} offset={6}>
          <p className="top-p">
            <img src="/login/password.svg" alt="" width="30" />
            密码重置
          </p>
        </Col>
      </Row>
      <Row>
        <Col span={6} offset={6}>
          <Form
            {...layout}
            form={form}
            validateTrigger={['onBlur']}
            name="control-hooks"
            onFinish={onFinish}
            style={{
              maxWidth: 600
            }}
          >
            <Form.Item
              validateFirst={true}
              name="password"
              label="重置密码"
              rules={[
                { required: true },
                {
                  validator: checkPwd
                }
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              validateFirst={true}
              name="pwd"
              label="确认密码"
              rules={[{ required: true }, { validator: validatePwd }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              validateFirst={true}
              name="emailcode"
              label="验证码"
              rules={[
                { required: true },
                { min: 6, max: 6, message: '验证码长度不正确' }
              ]}
            >
              <Input.OTP />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Space>
                <Button type="primary" htmlType="submit">
                  确认重置
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  )
}
export default ResetPwd
